﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dropdownlist_autopostback_enableedit.aspx.cs" Inherits="FineUI.Examples.dropdownlist.dropdownlist_autopostback_enableedit" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <f:PageManager ID="PageManager1" runat="server" />
        <f:SimpleForm ID="SimpleForm1" BodyPadding="5px" runat="server" Width="450px" EnableCollapse="true"
            ShowBorder="True" Title="简单下拉列表（自动回发，可编辑，强制选择）" ShowHeader="True">
            <Items>
                <f:DropDownList runat="server" ID="DropDownList1"
                    AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
                    EnableEdit="true" >
                    <f:ListItem Text="可选项1" Value="Value1" />
                    <f:ListItem Text="可选项2（不可选择）" Value="Value2" EnableSelect="false" />
                    <f:ListItem Text="可选项3（不可选择）" Value="Value3" EnableSelect="false" />
                    <f:ListItem Text="可选项4" Value="Value4" />
                    <f:ListItem Text="可选项5" Value="Value5" />
                    <f:ListItem Text="可选项6" Value="Value6" />
                    <f:ListItem Text="可选择项7" Value="Value7" />
                    <f:ListItem Text="可选择项8" Value="Value8" />
                    <f:ListItem Text="普通型1 < L > 1.5" Value="普通型1 < L > 1.5" />
                </f:DropDownList>

                <f:Button ID="btnSelectItem6" Text="选中[可选项6]" runat="server" OnClick="btnSelectItem6_Click"
                    CssClass="marginr">
                </f:Button>
                <f:Button ID="btnGetSelection" Text="获取此下拉列表的选中项" runat="server" OnClick="btnGetSelection_Click">
                </f:Button>
            </Items>
        </f:SimpleForm>
        <br />
        <br />
        <f:Label runat="server" ID="labResult">
        </f:Label>
        <br />
    </form>
</body>

    <script>
        Ext.onReady(function () {

            Ext.defer(function () {
                Ext.each(Ext.ComponentQuery.query('combo'), function (combo) {
                    combo.setConfig({ anyMatch: true });
                    combo.doQuery(combo.getValue());
                });
            }, 1000);

            Ext.create('Ext.form.Panel', {
                renderTo: Ext.getBody(),
                width: 300,
                bodyPadding: 10,
                items: [{
                    xtype: 'combo',
                    fieldLabel: '品牌筛选',
                    store: new Ext.data.ArrayStore({
                        fields: ['id', 'name'],
                        data: [
                            [1, '苹果'],
                            [2, '华为'],
                            [3, '小米'],
                            [4, 'OPPO'],
                            [5, 'vivo']
                        ]
                    }),
                    displayField: 'name',
                    valueField: 'id',
                    queryMode: 'local',
                    minChars: 1,
                    //anyMatch: true,
                    queryDelay: 300,
                    listeners: {
                        keyup: function(combo) {
                            var value = combo.getValue();
                            combo.store.clearFilter();
                            if (value) {
                                combo.store.filterBy(function(record) {
                                    return record.get('name').includes(value);
                                });
                            }
                        }
                    }
                }]
            });
        });
    </script>
</html>
